import { useRef, forwardRef, useImperativeHandle } from 'react'

// 【子组件】
// eslint-disable-next-line react/display-name
const Son = forwardRef((_props, ref) => {
	// input 实例
	const inputRef = useRef(null)

	// 聚焦函数
	const inputFocus = () => inputRef.current.focus()

	// 给父组件暴露聚焦函数
	useImperativeHandle(ref, () => ({ inputFocus }))

	return <input type="text" ref={inputRef} />
})

// 【父组件】
function UseInperativeHandle() {
	const sonRef = useRef(null)
	// 调用子组件中的方法聚焦
	const handleClick = () => {
		sonRef.current.inputFocus()
	}

	return (
		<>
			<h2>UseInperativeHandle</h2>
			<hr />
			<Son ref={sonRef} />
			<button onClick={handleClick}>调用子组件中暴露的方法聚焦</button>
		</>
	)
}

export default UseInperativeHandle
